import { useEffect, useState } from 'react'
import './index.scss'
import { useNavigate } from 'react-router-dom';
import { List, NavBar, SearchBar, Button } from 'antd-mobile';
import axios from '../../api/index'

type Disease = { diseaseName: string }
type Doctor = { doctorName: string }
type Drug = { drugsName: string }
type HotItem = { name: string }

function Ss() {
  const navigate = useNavigate();
  // const [result,setResult] = useState([])
  const [disease, setDisease] = useState<Disease[]>([])
  const [doctor, setDoctor] = useState<Doctor[]>([])
  const [drugs, setDrugs] = useState<Drug[]>([])
  const [hot, setHot] = useState<HotItem[]>([])
  const [keyword, setKeyword] = useState('')
  const [searchHistory, setSearchHistory] = useState<string[]>([])

  // 从localStorage加载搜索历史
  useEffect(() => {
    const savedHistory = localStorage.getItem('searchHistory')
    if (savedHistory) {
      setSearchHistory(JSON.parse(savedHistory))
    }
  }, [])

  // 获取热门搜索
  useEffect(() => {
    axios.get('/share/v1/popularSearch').then(res => {
      console.log(res);
      setHot(res.data.result)
    })
  }, [])

  // 保存搜索历史到localStorage
  const saveSearchHistory = (keyword: string) => {
    if (!keyword.trim()) return
    
    const newHistory = [keyword, ...searchHistory.filter(item => item !== keyword)].slice(0, 10) // 最多保存10条记录
    setSearchHistory(newHistory)
    localStorage.setItem('searchHistory', JSON.stringify(newHistory))
  }
  // 搜索
  const ss = ((keyword: string) => {
    if (!keyword.trim()) return
    
    // 保存搜索历史
    saveSearchHistory(keyword)
    
    axios.get('/share/v1/homePageSearch', {
      params: {
        keyWord: keyword
      }
    }).then(res => {
      console.log(res);
      setDisease(res.data.result?.diseaseSearchVoList)
      setDoctor(res.data.result?.doctorSearchVoList)
      setDrugs(res.data.result?.drugsSearchVoList)
    })
  })
  return (
    <div className='ssym'>
      <div className='ss-top'>
        <NavBar onBack={() => navigate(-1)}>
          <div className='ss-search'>
            <SearchBar value={keyword} onChange={setKeyword} onSearch={() => ss(keyword)} placeholder='输入内容' />
            <Button color='primary' size='small' onClick={() => ss(keyword)}>搜索</Button>
          </div>
        </NavBar>
      </div>
      {/* 搜索历史 */}
      {searchHistory.length > 0 && (
        <div className='ss-history-container'>
          <div className='ss-history-header'>
            <span>搜索历史</span>
            <Button size='mini' fill='none' onClick={() => {
              setSearchHistory([])
              localStorage.removeItem('searchHistory')
            }}>清空</Button>
          </div>
          <div className='ss-history-content'>
            {searchHistory.map((item, index) => (
              <span 
                key={index} 
                className='ss-history-item'
                onClick={() => {
                  setKeyword(item)
                  ss(item)
                }}
              >
                {item}
              </span>
            ))}
          </div>
        </div>
      )}
      
      {/* 热门搜索 */}
      <div className='ss-main'>
        热门搜索： {
          hot.map((item, index) => {
            return (
              <span key={index}>{item.name}</span>
            )
          })
        }
      </div>
      {
        disease?.length > 0 && <List header='病症'>
          {
            disease.map((item, index) => {
              return <List.Item key={index}>
                {item.diseaseName}
              </List.Item>
            })
          }
        </List>
      }
      {
        doctor?.length > 0 && <List header='医生'>
          {
            doctor.map((item, index) => {
              return <List.Item key={index}>
                {item.doctorName}
              </List.Item>
            })
          }
        </List>
      }
      {
        drugs?.length > 0 && <List header='药品'>
          {
            drugs.map((item, index) => {
              return <List.Item key={index}>
                {item.drugsName}
              </List.Item>
            })
          }
        </List>
      }
    </div>
  )
}

export default Ss